<template>
	<view class="">
		<!-- 定位+搜索+轮播 -->
		<!-- 定位 -->
		<view class="search-view">
			<image src="../../../static/icon.jpg" mode=""></image>
			<text class="search-text">阿里巴巴淘宝城2期西溪园区</text>
			<text>view</text>
		</view>
		<!-- 搜索 -->
		<view class="search-cout">
			<view class="search" >
				<image src="../../../static/icon.jpg" mode="widthFix" class="search-img"></image>
				<input type="text" value=""  placeholder="麻辣烫"/>
			
			</view>
		</view>
		<!-- 轮播 -->
		<view class="swiper-view">
			<swiper :indicator-dots="false" @change="bannerfun">
				<block v-for="(item,index) in lable" :key="index">
				<swiper-item>
					<view class="swiper-item">
						<block v-for="(listdata,index) in item" :key="index">
						<view class="content-img">
							<image :src="listdata.img" mode="widthFix" class="uploadimg" ></image>
							<text>{{listdata.title}}</text>
						</view>
						</block>
					</view>
				</swiper-item>
				<!-- 指示点 -->
				
			</block>	
			</swiper>
			<view class="instruct-view">
				<block v-for="(lisdata,index) in instructdata" :key="index">
					<view class="instruct" :class="{active:index==num}">
						{{lisdata}}
					</view>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				num:0,
				// 面板指示点
				instructdata:["",""],
				//轮播数组
				lable:[
					[
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
					],
					[
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
						{
							"img":"../../../static/icon.jpg",
							"title":"美食"
						},
					],
				],
			}
		},
		methods:{
			// 滑块事件
			bannerfun(e){
				console.log(e.detail.current)
				this.num=e.detail.current
			}
		}
	}
</script>

<style scoped>
	/* 定位 */
	.search-view image{
		width: 35upx;
		height: 35upx;
	}
	.search-view {
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		/* float: left; */
		align-items: center;
		height: 80upx;
	}
	.search-text{
		padding: 0 10upx;
	}
	/* 搜索 */
	.search-img{
		margin: auto 0 auto 20upx;
		width: 40upx;
		height: 40upx;
	}
	.search{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: flex;	
		background: #eff3f4;
		border-radius: 10upx;
		}
	.search input{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size: 25upx;
		color: #666;
	}
	.search-cout{
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;
	}
	/* 轮播 */
	swiper{
		height: 320upx !important;
		}
	/* 九宫格 */
	.swiper-item{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		height: 320upx;
	}
	.content-img{
		width: calc((100%/5)-12px) !important;
		margin: 20px;
		position: relative;
		text-align: center;
	}
	.content-img text{
		padding-top:20upx;
		font-size: 25upx;
	}
	.uploadimg{
		height: 50upx;
		width: 50upx;
		border-radius: 50upx;
		display: block;
		margin: 0 auto;
	}
	/* 指示点 */
	.instruct-view{
		display: flex;
		justify-content: center;
		padding-top: 10upx;
		
	}
	.instruct{
		background: #e6e6e6;
		height: 10upx;
		width: 30upx;
		border-radius: 50upx;
		margin: 0 10upx;
	}
	.active{
		background: #fbae22 !important;
	}
</style>
